<template>
  <div class="mainDiv">
    <div class="headDiv">
      <headd :category="array[7]" class="headHead"></headd>
    </div>
    <div class="bodyInfo">
      <div class="imgInfoDiv">
        <img :src="array[4]" alt="" class="imgInfo" />
      </div>
      <div class="otherInfoDiv" v-if="category != '失物招领'">
        <div class="holdPeo">
          <p>
            <label class="fontColorCss">活动负责人：</label>{{ this.array[5] }}
          </p>
        </div>
        <div class="holdWhere">
          <p>
            <label class="fontColorCss">活动地点：</label>{{ this.array[1] }}
          </p>
        </div>
        <div class="holdTime">
          <p>
            <label class="fontColorCss">活动时间：</label>{{ this.array[6] }}
          </p>
        </div>
        <div class="holdDesc">
          <label class="fontColorCss">活动详情：</label>{{ this.array[9] }}
        </div>
      </div>
      <div class="otherInfoDiv" v-else>
        <div class="holdPeo">
          <p><label class="fontColorCss">发起人：</label>{{ this.array[5] }}</p>
        </div>
        <div class="holdWhere">
          <p>
            <label class="fontColorCss">{{ array[7] }}地点：</label
            >{{ this.array[1] }}
          </p>
        </div>
        <div class="holdTime">
          <p>
            <label class="fontColorCss">{{ array[7] }}时间：</label
            >{{ this.array[6] }}
          </p>
        </div>
        <div class="holdDesc">
          <label class="fontColorCss">{{ array[7] }}详情：</label
          >{{ this.array[9] }}
        </div>
      </div>
      <div class="findLinkPeo">
        <el-button type="primary" @click="toChat" class="linkPeoBtn"
          >联系负责人</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import headd from "../pageHeader/index.vue";

export default {
  name: "",
  data() {
    return {
      headInfo: "活动详情",
      array: [],
      category: "",
      id: "",
    };
  },
  components: {
    headd,
  },
  methods: {
    toChat() {
      this.$router.push({
        path: "/chat",
        query: {
          firstPeople: this.$store.state.yb_userid,
          secendPeople: this.array[3],
          master: this.array[5],
          category: this.array[2],
          headImg: this.array[8],
        },
      });
    },
  },
  created() {
    var query = this.$route.query;
    this.id = query.id;
    this.category = query.category;
    this.axios
      .get("http://120.78.199.38:9000/getActivity3", {
        params: {
          category: this.category,
          id: this.id,
        },
      })
      .then((res) => {
        this.array = res.data[0];
        // console.log(this.array);
      });
  },
};
</script>
<style scoped>
.headDiv {
  height: 7vh;
  z-index: 9;
  background-color: white;
}
.headHead {
  position: absolute;
  top: 0.5vh;
}

.mainDiv {
  width: 100%;
  background-color: rgb(236, 234, 240);
}
.imgInfoDiv {
  width: 100%;
  text-align: center;
  padding: 10px 0;
}
.imgInfo {
  width: 90vw;
  height: 60vw;
}
.findLinkPeo {
  width: 100%;
  height: 8vh;
  position: fixed;
  bottom: 0vh;
  z-index: 9;
  text-align: center;
  background-color: rgb(236, 234, 240);
}
.linkPeoBtn {
  width: 30vw;
  height: 6vh;
  position: relative;
  top: 1vh;
  border-radius: 10px;
  border-style: solid;
  font-size: 16px;
  background-color: rgb(153, 202, 235);
  position: relative;
}
.fontColorCss {
  color: rgb(180, 173, 141);
  font-weight: 550;
}
.otherInfoDiv {
  height: 100%;
  padding: 0 20px 6vh 20px;
}
.holdPeo,
.holdWhere,
.holdTime {
  margin-bottom: 22px;
}
</style>
